<template>
	<!-- 内容区域 -->
	<div class="g-wrapper">
		<!-- 路由输出 -->
		<router-view></router-view>
	</div>
	<!-- 底部tabbar -->
	<!-- route启用路由模式 -->
	<van-tabbar route active-color="#ee0a24">
		<van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
		<van-tabbar-item replace to="/category" icon="search">分类</van-tabbar-item>
		<van-tabbar-item replace to="/cart" icon="friends-o">购物车</van-tabbar-item>
		<van-tabbar-item replace to="/my" icon="setting-o">我的</van-tabbar-item>
	</van-tabbar>
</template>

<script setup></script>

<style lang="scss" scoped>
/* 定义变量 */
$height: 60px;

.g-wrapper {
	height: calc(100vh - $height);
	overflow: scroll;
}
.van-tabbar {
	height: 60px;
}
</style>
